<template>
  <div :id="id" class="echart-view" />
</template>

<script>
import { onBeforeUnmount, onMounted, reactive, toRefs } from 'vue-demi'
import * as Echarts from 'echarts'

export default {
  name: 'BaseEchart',
  props: {
    // 图表ID
    id: {
      type: String,
      default: 'id'
    }
  },
  setup(props, { emit }) {
    // echart 实例
    const RData = reactive({
      chart: null
    })

    onMounted(() => {
      if (!RData.chart) {
        const dom = document.getElementById(props.id)
        RData.chart = Echarts.init(dom)
      }
    })

    onBeforeUnmount(() => {
      RData.chart && RData.chart.dispose()
      RData.chart = null
    })

    return {
      ...toRefs(RData)
    }
  }
}
</script>

<style scoped lang="scss">
</style>
